<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>展位展示</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd kui-flex kui-flex-between kui-flex-middle">
            <div class="kui-hd-title">地图展示</div>
            <div class="kui-hd-desk">
              <Form class="kui-form-panel" ref="formInline" :model="temporaryData" label-position="left" inline>
                  <FormItem label="类型:" :label-width="40" style="margin-bottom: 0;width:140px;" placeholder="请选择">
                      <Select size="small" v-model="temporaryData.cate" filterable clearable>
                          <Option v-for="item in cateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                  </FormItem>
                  <FormItem label="区域:" :label-width="40" style="margin-bottom: 0; width:140px;" placeholder="请选择">
                      <Select size="small" v-model="temporaryData.area" filterable clearable>
                          <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                  </FormItem>
                  <FormItem label="编号:" :label-width="40" style="margin-bottom: 0; width:140px;" placeholder="请输入展位编号">
                      <Input size="small" v-model="temporaryData.no" clearable/>
                  </FormItem>
                  <FormItem style="margin-bottom: 0;">
                      <Button size="small"  type="success" @click="searchData()">搜索</Button> 
                      <Button size="small"  @click="clickCancel()" style="margin-left: 8px;">重置</Button>
                  </FormItem>
              </Form>
            </div>
            <div class="kui-hd-desk">
              <Button size="small"  type="success" @click="clickData()">全部：{{ countData.all }}个</Button>
              <Button size="small"  @click="clickData(-1)" style="margin-left:8px;background: #999;color:#fff;">异常：{{ countData.repair }}</Button>
              <Button size="small"  type="primary" @click="clickData(1)" style="margin-left:8px;">空闲：{{ countData.free }}</Button>
              <Button size="small"  @click="clickData(2)" style="margin-left:8px;background: #d4237a;color:#fff;">使用：{{ countData.used }}</Button>
              <Button size="small"  @click="clickData(3)" style="margin-left:8px;">预约：{{ countData.reserve }}</Button>
            </div>
          </div>
          
          <div class="kui-item-bd device-management-box">
            <div id="container" style="width:100%; height:700px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      temporaryData:{},
      areaList: [], //区域
      cateList: [], //类型
      countData: {}, //展位统计
      no: [], //展位编号
      customer_name: [], //客户名字
      address: [], //展位地址
      text:[], //展位详情
      gps: [], //gps地址
      state: [] //状态
     }
   },
   methods: {
     // 获取工作台数据
    async getPageData() {
      const app = this
      let { data } = await app.$axios.get('/user/v1/desk')
      if (data.code === 100) {
        app.countData = data.result.count
        
      }
    },
     //获取数据
    async getData() {
      const app = this
      //获取浏览器存储的字符串
      let arrGet = sessionStorage.idArr 
      let { data } = await app.$axios.get('/master/v1/all/board',{
        params: {
          id: arrGet
        }
      })
      sessionStorage.idArr = ''
      app.mapAdd()
      if( data.code === 100 &&  JSON.stringify(data.result) !== '{}') {
          app.no = data.result.map(item => {
            return item.no
          })
          app.gps = data.result.map(item => {
            return item.gps
          })
          app.state = data.result.map(item => {
            return item.state
          })
          app.address = data.result.map(item => {
            return item.address
          })
          app.customer_name = data.result.map(item => {
            return item.customer_name
          })
          app.text = data.result.map(item => {
            return item.spec
          })
        }else {
          app.$Message.error(data.msg)
        }
    },
     //获取数据
    async clickData(num) {
      const app = this
      let { data } = await app.$axios.get('/master/v1/all/board',{
        params: {
          state:num
        }
      })
      app.mapAdd()
      if( data.code === 100 &&  JSON.stringify(data.result) !== '{}') {
          app.no = data.result.map(item => {
            return item.no
          })
          app.gps = data.result.map(item => {
              return item.gps
          })
          app.state = data.result.map(item => {
            return item.state
          })
          app.address = data.result.map(item => {
            return item.address
          })
          app.customer_name = data.result.map(item => {
            return item.customer_name
          })
          app.text = data.result.map(item => {
            return item.spec
          })
        }else {
          app.$Message.error(data.msg)
        }
    },
    //区域搜索选项
    async areaData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'area'}
      })
      if(data.code === 100){
        app.areaList = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //类型搜索选项
    async cateData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'cate'}
      })
      if(data.code === 100){
        app.cateList = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //搜索数据
    async searchData(num) {
      const app = this
      let { data } = await app.$axios.get('/master/v1/all/board',{
        params: {
          ...app.temporaryData
        }
      })
      app.mapAdd()
      if( data.code === 100 &&  JSON.stringify(data.result) !== '{}') {
          app.gps = data.result.map(item => {
              return item.gps
          })
          app.state = data.result.map(item => {
            return item.state
          })
          app.address = data.result.map(item => {
            return item.address
          })
          app.customer_name = data.result.map(item => {
            return item.customer_name
          })
          app.text = data.result.map(item => {
            return item.text
          })
        }else {
          app.$Message.error(data.msg)
        }
    },
    clickCancel(){
      const app = this
      app.temporaryData = {}
      app.getData()
    },
    //创建地图
    mapAdd() {
      const app = this
      let map = new AMap.Map('container', {
        center: [106.08,30.78],
        zoom: 12
      })

    function initPage(PointSimplifier, $) {

        var pointSimplifierIns, groupStyleMap;

        pointSimplifierIns = new PointSimplifier({
            zIndex: 115,
            //autoSetFitView: false,
            map: map, //所属的地图实例

            getPosition: function(item) {

                var lngLatLine = item.lngLatLine;

                if (!lngLatLine) {
                    return null;
                }

                var parts = lngLatLine.split(',');

                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            getHoverTitle: function(dataItem, idx) {
                return `编号: ${dataItem.no}<br/>
                        地址：${dataItem.add}<br/>
                        规格：${dataItem.spec}<br/>
                        客户：${dataItem.name}<br/>`
            },
            //使用GroupStyleRender
            renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
            renderOptions: {
                //点的样式
                pointStyle: {
                    width: 5,
                    height: 5,
                    fillStyle:'#A2D0FA'
                },
                getGroupId: function(item, idx) {

                    return item.groupId;
                },
                groupStyleOptions: function(gid) {

                    return groupStyleMap[gid];
                }

            }
        });

        function onIconLoad() {
            pointSimplifierIns.renderLater();
        }

        function onIconError(e) {
            alert('图片加载失败！');
        }

        groupStyleMap = {
              '-1': {
                  pointStyle: {
                      //绘制点占据的矩形区域
                      content: PointSimplifier.Render.Canvas.getImageContent(
                        '/img/v1/-1.svg', onIconLoad, onIconError),
                      //宽度
                      width: 20,
                      //高度
                      height: 20,
                      //定位点为中心
                      offset: ['-50%', '-50%'],
                      // fillStyle: 'null',
                      //strokeStyle: null
                  }
              },
              '1': {
                  pointStyle: {
                      content: PointSimplifier.Render.Canvas.getImageContent(
                        '/img/v1/1.svg', onIconLoad, onIconError),
                      width: 20,
                      //高度
                      height: 20,
                      //定位点为中心
                      offset: ['-50%', '-50%'],
                      // fillStyle: 'null',
                      // strokeStyle: null
                  }
              },
              '2': {
                  pointStyle: {
                      //绘制点占据的矩形区域
                      content: PointSimplifier.Render.Canvas.getImageContent(
                        '/img/v1/2.svg', onIconLoad, onIconError),
                      //宽度
                      width: 20,
                      //高度
                      height: 20,
                      //定位点为中心
                      offset: ['-50%', '-50%'],
                      // fillStyle: 'null',
                      //strokeStyle: null
                  }
              },
              '3': {
                  pointStyle: {
                      //绘制点占据的矩形区域
                      content: PointSimplifier.Render.Canvas.getImageContent(
                        '/img/v1/3.svg', onIconLoad, onIconError),
                      //宽度
                      width: 20,
                      //高度
                      height: 20,
                      //定位点为中心
                      offset: ['-50%', '-50%'],
                      // fillStyle: 'null'
                  }
              }
          }

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        $('#loadingTip').remove()
              let lines = app.gps
              let sta = app.state
              let num = app.no
              let name = app.customer_name
              let add = app.address
              let spec = app.text
              let data = []
              for (let i = 0, len = lines.length; i < len; i++) {
                  data.push({
                      lngLatLine: lines[i],
                      no: num[i],
                      name: name[i],
                      add: add[i],
                      spec: spec[i],
                      groupId: sta[i]
                  })
              }
              pointSimplifierIns.setData(data)
    }

    AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {

        if (!PointSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        initPage(PointSimplifier, $);
    });
    }
   },
   created () {
     this.getData()
     this.getPageData()
     this.areaData()
     this.cateData()
   }
 }
</script>

<style lang="less" scoped>
@range: 24px;
.kui-section-item {
  &+.kui-section-item {
    margin-top: @range !important;
  }
}
.device-management-box {
  #container {
    width: 100%;
    height: 500px;
  }
}
</style>
